<template>
  <div class="major-events">
    <!-- 导航 -->
    <NavBar :title="t('pledge.detailsTitle')" isFixed />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <Images
          class="contentview-notdata-img"
          src="/image/mvp/coin/major-events-nodata.svg"
        ></Images>
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <van-list
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <div
            class="list-item items-center"
            v-for="(item, index) in pageData.list"
            :key="index"
          >
            <img
              v-if="item.taskType == 2 || item.taskType == 7"
              class="list-item-img"
              src="/image/pledge/firstcz-icon.svg"
            />
            <img
              v-else-if="item.taskType == 5"
              class="list-item-img"
              src="/image/pledge/yy-icon.svg"
            />
            <img
              v-else-if="item.taskType == 6"
              class="list-item-img"
              src="/image/pledge/bxzh-icon.svg"
            />
            <img
              v-else-if="item.taskType == 13"
              class="list-item-img"
              src="/image/pledge/bdsj-icon.svg"
            />
            <img
              v-else
              class="list-item-img"
              src="/image/pledge/recharge-icon.svg"
            />

            <div class="list-item-right">
              <div class="list-item-title">
                <div class="list-item-title-text">{{ item.title }}</div>
                <div class="list-item-title-value">
                  +{{ item.changeProfitRate }}%
                </div>
              </div>
              <div class="list-item-time">{{ item.changeTime }}</div>
            </div>
          </div>
        </van-list>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="module">
import { useDateFormat } from "@vueuse/core";
import { getPledgeRateRecord } from "../../api/pledge";
import Decimal from "decimal.js";

const { t } = useI18n();
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  pageNum: 1,
  total: 0,
});
// 上啦加载
const onLoadList = () => {
  pageData.pageNum += 1;
  getListDataRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
    }
  });
};
// 获取列表数据
const getListDataRequest = async (call) => {
  pageData.loading = true;
  const res = await getPledgeRateRecord({
    pageNum: pageData.pageNum,
    pageSize: 30,
  });
  pageData.loading = false;
  if (res) {
    let majorList = [];
    // console.log("--获取收益明细--", res);
    majorList = res.records.map((e, index) => {
      e.changeProfitRate = new Decimal(e.changeProfitRate || 0).mul(100);

      e.changeTime = useDateFormat(
        Number(e.changeTime),
        "YYYY-MM-DD HH:mm:ss"
      ).value;

      if (e.taskType == 2) {
        e.title = t("pledge.scczxxx").replace("xxx", "$10");
      } else if (e.taskType == 4) {
        e.title = `${t("pledge.rechargeTitle")} $50`;
      } else if (e.taskType == 9) {
        e.title = `${t("pledge.rechargeTitle")} $100`;
      } else if (e.taskType == 10) {
        e.title = `${t("pledge.rechargeTitle")} $250`;
      } else if (e.taskType == 11) {
        e.title = `${t("pledge.rechargeTitle")} $500`;
      } else if (e.taskType == 12) {
        e.title = `${t("pledge.rechargeTitle")} $1000`;
      } else if (e.taskType == 14) {
        e.title = `${t("pledge.rechargeTitle")} $10`;
      } else if (e.taskType == 13) {
        e.title = `${t("lotteryMoney.yqxwhyzc").replace("xxx", 1)}`;
      } else if (e.taskType == 5) {
        e.title = t("lotteryMoney.hysc");
      } else if (e.taskType == 6) {
        e.title = t("pledge.jhbxzhbck");
      } else {
        e.title = e.taskName || "--";
      }

      return e;
    });

    pageData.list = pageData.list.concat(majorList);

    pageData.total = res.total || 0;
    if (pageData.list.length >= res.total || 0) {
      pageData.finished = true;
    }
    if (res.records && res.records.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  }
};

onMounted(() => {
  getListDataRequest();
  firebase?.logEvent("BDC_H5_Pledge_Detail_PUV");
});
</script>
<style lang="scss" scoped>
.list {
  &-item {
    margin: 0 * 2px 15 * 2px;
    padding: 14 * 2px 0 * 2px;
    border-bottom: 3px solid rgba(115, 119, 128, 0.15);
    &-img {
      width: 36 * 2px;
      height: 36 * 2px;
      margin-right: 10 * 2px;
    }
    &-right {
      width: calc(100% - 36 * 2px);
    }
    &-title {
      display: flex;
      justify-content: space-between;

      width: 100%;
      margin-bottom: 10 * 2px;
      &-text {
        @include multi-line-omit(3);
        word-break: break-word;
        color: #141924;
        font-size: 14 * 2px;
        font-weight: 510;
      }
      &-value {
        margin-left: 10 * 2px;
        color: #007bff;
        font-size: 14 * 2px;
        font-weight: 600;
      }
    }
    &-time {
      color: #999da7;
      font-size: 13 * 2px;
    }
  }
}
.major-events {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  .contentview {
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 120 * 2px;
        height: 110 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
}
</style>
